<template>
    <div class="container">
        <div ref="card" style="background-color:#00ff00;width:0;height:0.1;margin-left:-300;margin-top:-300"></div>
        <div ref="btn" class="card" style="background-color:#00ff00" @click="clickBtn"></div>
    </div>
</template>

<style>
    .container {
        flex: 1;
    }

    .card {
        width: 200;
        height: 200;
        position: absolute;
        border-radius: 100;
        top: 0;
    }

</style>

<script>
    export default {
        data: {},
        created() {
            this.$navigator.setLeftItem({
                text: '返回', // 展示的文字 (和图片 二选一)    
                textColor: '', // 文字颜色 (默认为白色)
                fontSize: '32', // 字号（默认32px）
                fontWeight: 'normal', // 是否加粗（默认不加粗）
                image: '' // 展示的图片url (和文字 二选一，文字优先级更高)
            }, () => {
                // 点击回调
                this.$router.back({
                    type: 'PUSH'
                })
            })
        },
        methods: {
            getEl: function (e) {
                return e.ref;
            },
            clickBtn: function () {
                let card = this.getEl(this.$refs.card);
                let btn = this.getEl(this.$refs.btn);
                let duration = 700;
                let radius = 1800;

                this.$bindingx.bind({
                    eventType: 'timing',
                    exitExpression: {
                        origin: `t>${duration}`
                    },
                    props: [{
                            element: card,
                            property: 'border-top-right-radius',
                            expression: {
                                origin: `easeInOutQuint(t,0,${radius},${duration})`
                            }
                        },
                        {
                            element: card,
                            property: 'border-bottom-left-radius',
                            expression: {
                                origin: `easeInOutQuint(t,0,${radius},${duration})`
                            }
                        },
                        {
                            element: card,
                            property: 'border-bottom-right-radius',
                            expression: {
                                origin: `easeInOutQuint(t,0,${radius},${duration})`
                            }
                        },
                        {
                            element: card,
                            property: 'width',
                            expression: {
                                origin: `easeInOutQuint(t,0,${radius},${duration})`
                            }
                        },
                        {
                            element: card,
                            property: 'height',
                            expression: {
                                origin: `easeInOutQuint(t,0,${radius},${duration})`
                            }
                        },
                        {
                            element: btn,
                            property: 'background-color',
                            expression: {
                                origin: `evaluateColor('#00ff00','#0000ff',max(700-t,0)/700)`
                            }
                        }
                    ]

                });

            }


        }
    }

</script>
